import 'package:beamer/beamer.dart';
import 'package:flutter/material.dart';
import 'package:rabbit_mobile/view/goods_details/widget/goods_details_options.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:rabbit_mobile/provide/riverpod_provider.dart';
import 'package:badges/badges.dart' as badges;

import '../../../provide/riverpod_notifier.dart';

class GoodsDetailsFooter extends ConsumerStatefulWidget {
  const GoodsDetailsFooter({super.key});

  @override
  _GoodsDetailsFooter createState() => _GoodsDetailsFooter();
}

class _GoodsDetailsFooter extends ConsumerState<GoodsDetailsFooter> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _offsetAnimation;
  late final ValueNotifier<int> totalCount;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    // 初始化 ValueNotifier 要監聽的值
    totalCount = ValueNotifier(10);

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    );

    _offsetAnimation = Tween<Offset>(
      begin: const Offset(0, 0),
      end: const Offset(0, -1),
    ).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
    totalCount.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final cartCountAsync = ref.watch(getShoppingCartCountProvider);
    final shoppingCartGoodsTotalCountValue = ref.watch(shoppingCartGoodsTotalCount);

    final count = cartCountAsync.when(
      data: (d) => d.count,
      loading: () => 0,
      error: (_, __) => 0,
    );

    return Container(
      width: double.infinity,
      height: 60 + MediaQuery.of(context).padding.bottom,
      decoration: const BoxDecoration(color: Colors.white),
      child: Column(
        children: [
          SizedBox(
            height: 60,
            child: Row(
              children: [
                Expanded(
                  flex: 4,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset('assets/2.0x/star_uncollection.png', width: 25, height: 25),
                      GestureDetector(
                        onTap: () {
                          Beamer.of(context).beamToNamed('/shopping_cart');
                        },
                        child: badges.Badge(
                          badgeAnimation: const badges.BadgeAnimation.slide(
                            animationDuration: Duration(milliseconds: 200),
                            colorChangeAnimationDuration: Duration(milliseconds: 300),
                            loopAnimation: false,
                            curve: Curves.fastOutSlowIn,
                            colorChangeAnimationCurve: Curves.easeInCubic,
                          ),
                          badgeContent: Text(
                            "${shoppingCartGoodsTotalCountValue >= 100 ? "99+" : shoppingCartGoodsTotalCountValue}",
                            style: const TextStyle(color: Colors.white, fontSize: 12),
                          ),
                          child: const Icon(
                            Icons.shopping_cart,
                            color: Colors.teal,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  flex: 6,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      GestureDetector(
                        onTap: () {
                          goodsDetailsOptionsKey.currentState?.showCupertinoModalPopups(specActionType.addCart);
                        },
                        child: Container(
                          width: 110,
                          height: 45,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.circular(10)),
                          child: const Text(
                            "加入購物車",
                            style: TextStyle(fontSize: 14, color: Colors.white),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          goodsDetailsOptionsKey.currentState?.showCupertinoModalPopups(specActionType.buyNow);
                        },
                        child: Container(
                          width: 110,
                          height: 45,
                          alignment: Alignment.center,
                          decoration:
                              BoxDecoration(color: const Color(0xFF00CE8A), borderRadius: BorderRadius.circular(10)),
                          child: const Text(
                            "立即購買",
                            style: TextStyle(fontSize: 14, color: Colors.white),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: MediaQuery.of(context).padding.bottom)
        ],
      ),
    );
  }
}
